<script setup>
import {
    userLogoutApi
} from '@/api/login.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const name = window.localStorage.getItem('username');
const logOut = async () => {
    let result = await userLogoutApi();
    if (result.code === 1) {
        ElMessage.success(result.data)
        router.push('/');
        return;
    } else {
        return;
    }
}
</script>

<template>
    <div>
        <el-container class="layout-container">
            <el-header>
                <img src="@\assets\logo2.png" style="width: auto; height: 40px; border:none;">
                <el-text size="large">点餐欢迎您:
                    <el-button type="primary" plain @click="logOut">{{ name }}</el-button>
                </el-text>
            </el-header>
            <el-main>
                <div>
                    <router-view></router-view>
                </div>
            </el-main>
            <el-footer>
                <el-menu :ellipsis="false" :default-active="activeIndex" style="width: 100%;" class="el-menu-demo"
                    mode="horizontal" router>
                    <el-menu-item index="/user/browse" style="width: 33.33%;">浏览</el-menu-item>
                    <el-menu-item index="/user/Shopping" style="width: 33.33%;">购物车</el-menu-item>
                    <el-menu-item index="/user/personal" style="width: 33.33%;">个人中心</el-menu-item>
                </el-menu>
            </el-footer>
        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.layout-container {
    height: 100vh;

    .el-header {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;

    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;

    }

    .el-main {
        background: url('@/assets/sy2.jpg') no-repeat center / cover;
    }
}
</style>